<template>
  <div class="cabinet-repair-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="柜类维修" left-arrow @click-left="handleGoBack" />

    <!-- 可滑动图片/视频区域 -->
    <div class="banner-area">
      <van-swipe class="banner-swipe" :autoplay="3000" indicator-color="#fff">
        <!-- 第一个轮播项：视频 -->
        <van-swipe-item>
          <div class="video-container" @click="openVideoModal">
            <video
              ref="bannerVideoRef"
              src="@/assets/videos/banner-video.mp4"
              class="banner-video"
              autoplay
              muted
              loop
              playsinline
              poster="@/assets/images/cabinetrepair/banner/b1.jpg"
            >
              您的浏览器不支持视频播放
            </video>
            <!-- 播放按钮覆盖层 -->
            <div class="video-overlay">
              <van-icon name="play-circle-o" class="play-icon" />
              <span class="play-text">点击观看完整视频</span>
            </div>
          </div>
        </van-swipe-item>
        <!-- 其他轮播项：图片 -->
        <van-swipe-item>
          <img
            src="@/assets/images/curtaininstallation/banner/b1.jpg"
            alt="柜类维修轮播2"
            class="banner-img"
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="@/assets/images/cabinetrepair/banner/b3.jpg"
            alt="柜类维修轮播3"
            class="banner-img"
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="@/assets/images/cabinetrepair/banner/b4.jpg"
            alt="柜类维修轮播4"
            class="banner-img"
          />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 服务信息区域 -->
    <div class="service-info">
      <div class="promotion">
        <p class="title">多名师傅报价，择优选择</p>
        <div class="coupons">
          <van-tag color="#ff4545">券 8元 领取</van-tag>
          <van-tag color="#ff4545">12元 领取</van-tag>
        </div>
        <p class="stats">已服务45.0万+次 | 平台监管价 | 杜绝乱收费</p>
      </div>

      <!-- 服务保障（点击弹窗） -->
      <van-cell
        title="服务保障"
        value="明码标价 | 未上门随时退 | 30天质保"
        is-link
        @click="showAssurance = true"
      />

      <!-- 服务区域 -->
      <van-cell
        title="服务区域"
        :value="selectedAreaText"
        is-link
        @click="showRegionSelector = true"
      />
    </div>

    <!-- 吸顶标签切换：调整 offset-top 为 0 实现置顶 -->
    <van-tabs
      v-model:active="activeTab"
      sticky
      offset-top="0"
      class="tabs"
      @click-tab="handleTabClick"
    >
      <!-- 服务详情 -->
      <van-tab title="服务详情">
        <div class="tab-content service-detail">
          <section class="fault-section">
            <h2>窗帘安装</h2>
            <p>装前谈好价，装后不加价</p>
            <div class="fault-tags">
              <van-tag plain>价格透明</van-tag>
              <van-tag plain>全年无休</van-tag>
              <van-tag plain>上门准时</van-tag>
              <van-tag plain>师傅靠谱</van-tag>
              <van-tag plain>保护您的隐私</van-tag>
            </div>
            <img
              src="@/assets/images/curtaininstallation/other/o1.jpg"
              alt="窗帘安装示例1"
              class="section-img"
            />
            <img
              src="@/assets/images/curtaininstallation/other/o2.jpg"
              alt="窗帘安装示例2"
              class="section-img"
              style="margin-top: 8px"
            />
            <img
              src="@/assets/images/cabinetrepair/other/o3.jpg"
              alt="窗帘安装示例3"
              class="section-img"
              style="margin-top: 8px"
            />
            <img
              src="@/assets/images/cabinetrepair/other/o4.jpg"
              alt="窗帘安装示例4"
              class="section-img"
              style="margin-top: 8px"
            />
            <img
              src="@/assets/images/cabinetrepair/other/o5.jpg"
              alt="窗帘安装示例5"
              class="section-img"
              style="margin-top: 8px"
            />
          </section>
        </div>
      </van-tab>

      <!-- 用户评价 -->
      <van-tab title="用户评价">
        <div class="tab-content user-review">
          <!-- 加载状态 -->
          <div v-if="loading" class="loading-container">
            <van-loading type="spinner" size="24px">加载中...</van-loading>
          </div>

          <!-- 错误状态 -->
          <div v-else-if="error" class="error-container">
            <van-empty image="error" description="加载失败">
              <van-button type="primary" size="small" @click="fetchEvaluations">
                重新加载
              </van-button>
            </van-empty>
          </div>

          <!-- 空状态 -->
          <div v-else-if="evaluationList.length === 0" class="empty-container">
            <van-empty image="search" description="暂无评价">
              <van-button type="primary" size="small" @click="fetchEvaluations">
                刷新
              </van-button>
            </van-empty>
          </div>

          <!-- 正常显示评价 -->
          <div v-else>
            <div class="review-stats">
              <div class="stat-item">
                <p>{{ totalEvaluations }}+</p>
                <p>客户好评</p>
              </div>
              <div class="stat-item">
                <p>{{ averageScore.toFixed(1) }}</p>
                <p>平均评分</p>
              </div>
            </div>

            <div class="review-tags">
              <van-tag plain
                >技术专业 {{ formatCount(technicalCount) }}+</van-tag
              >
              <van-tag plain>礼貌热情 {{ formatCount(politeCount) }}+</van-tag>
              <van-tag plain>快速完工 {{ formatCount(fastCount) }}+</van-tag>
            </div>

            <div class="review-list">
              <van-cell
                v-for="(item, index) in evaluationList"
                :key="item.evaluationId || index"
                class="review-item"
              >
                <template #title>
                  <div class="user-info">
                    <p>{{ formatPhone(item.userId) }}</p>
                    <p>{{ item.city || "未知城市" }}</p>
                  </div>
                  <div class="review-time">
                    {{ formatTime(item.createTime) }}
                  </div>
                </template>
                <template #label>
                  <div class="stars">
                    <van-icon
                      name="star"
                      color="#FFC107"
                      v-for="i in item.score"
                      :key="i"
                    />
                    <van-icon
                      name="star-o"
                      color="#FFC107"
                      v-for="i in 5 - item.score"
                      :key="i + 5"
                    />
                  </div>
                  <div class="review-content" v-if="item.content">
                    {{ item.content }}
                  </div>
                </template>
              </van-cell>

              <!-- 加载更多 -->
              <div class="load-more" v-if="hasMore">
                <van-button
                  type="primary"
                  size="small"
                  :loading="loadingMore"
                  loading-text="加载中..."
                  @click="loadMoreEvaluations"
                  style="width: 100%; margin-top: 16px"
                >
                  加载更多评价
                </van-button>
              </div>

              <van-button
                v-else
                type="primary"
                size="small"
                style="width: 100%; margin-top: 16px"
                @click="fetchEvaluations"
              >
                查看全部评价（{{ totalEvaluations }}+）
              </van-button>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 底部按钮 -->
    <div class="fixed-btn-area">
      <van-button type="primary" size="large" @click="goToConfirmOrder"
        >填写需求 查看附近师傅报价</van-button
      >
      <p>已有51.0万+人获得报价</p>
    </div>

    <!-- 服务保障弹窗 -->
    <van-popup
      v-model:show="showAssurance"
      position="bottom"
      :style="{ height: '60%' }"
    >
      <div class="assurance-popup">
        <div class="popup-header">
          <h2>万师傅安心保障</h2>
          <p>价格透明 | 服务保障</p>
          <van-icon
            name="close"
            class="close-icon"
            @click="showAssurance = false"
          />
        </div>
        <div class="assurance-list">
          <div class="assurance-item">
            <van-icon name="price-tag-o" color="#0066ff" />
            <div>
              <h3>明码标价</h3>
              <p>价格公开透明，不乱收费</p>
            </div>
          </div>
          <div class="assurance-item">
            <van-icon name="return-o" color="#0066ff" />
            <div>
              <h3>未上门随时退</h3>
              <p>对报价不满意，师傅上门前无责全额退</p>
            </div>
          </div>
          <div class="assurance-item">
            <van-icon name="shields-o" color="#0066ff" />
            <div>
              <h3>30天质保</h3>
              <p>因师傅原因导致故障复发，30天内免费上门</p>
            </div>
          </div>
          <div class="assurance-item">
            <van-icon name="headset-o" color="#0066ff" />
            <div>
              <h3>专业客服</h3>
              <p>售前售后全程跟进，问题及时响应</p>
            </div>
          </div>
        </div>
      </div>
    </van-popup>

    <!-- 地区选择弹窗 -->
    <van-popup
      v-model:show="showRegionSelector"
      position="bottom"
      :style="{ height: '80%' }"
    >
      <div class="region-selector">
        <div class="region-header">
          <h2>选择服务区域</h2>
          <van-icon
            name="close"
            class="close-icon"
            @click="showRegionSelector = false"
          />
        </div>

        <div class="region-tabs">
          <van-tabs
            v-model:active="regionTab"
            @click-tab="handleRegionTabClick"
          >
            <van-tab title="选择省份">
              <div v-if="loadingProvinces" class="loading-container">
                <van-loading type="spinner" size="24px"
                  >加载省份中...</van-loading
                >
              </div>
              <div v-else-if="errorProvinces" class="error-container">
                <van-empty image="error" description="加载省份失败">
                  <van-button
                    type="primary"
                    size="small"
                    @click="fetchProvinces"
                  >
                    重新加载
                  </van-button>
                </van-empty>
              </div>
              <div v-else-if="provinces.length === 0" class="empty-container">
                <van-empty image="search" description="暂无省份数据">
                  <van-button
                    type="primary"
                    size="small"
                    @click="fetchProvinces"
                  >
                    刷新
                  </van-button>
                </van-empty>
              </div>
              <div v-else class="region-list">
                <van-cell
                  v-for="province in provinces"
                  :key="province.regionid"
                  :title="province.regionname"
                  is-link
                  @click="selectProvince(province)"
                />
              </div>
            </van-tab>
            <van-tab title="选择城市">
              <div v-if="!selectedProvince" class="empty-container">
                <van-empty image="warning" description="请先选择省份" />
              </div>
              <div v-else-if="loadingCities" class="loading-container">
                <van-loading type="spinner" size="24px"
                  >加载城市中...</van-loading
                >
              </div>
              <div v-else-if="errorCities" class="error-container">
                <van-empty image="error" description="加载城市失败">
                  <van-button
                    type="primary"
                    size="small"
                    @click="fetchCities(selectedProvince.regionid)"
                  >
                    重新加载
                  </van-button>
                </van-empty>
              </div>
              <div v-else-if="cities.length === 0" class="empty-container">
                <van-empty image="search" description="该省份下暂无城市数据" />
              </div>
              <div v-else class="region-list">
                <van-cell
                  v-for="city in cities"
                  :key="city.regionid"
                  :title="city.regionname"
                  :label="
                    city.fastestarrivaltime
                      ? `${city.fastestarrivaltime}小时内上门`
                      : '暂无法上门'
                  "
                  is-link
                  @click="selectCity(city)"
                />
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </van-popup>

    <!-- 视频全屏播放弹窗 -->
    <van-popup
      v-model:show="showVideoModal"
      position="center"
      :style="{ width: '100vw', height: '100vh', backgroundColor: '#000' }"
      :overlay-style="{ backgroundColor: 'rgba(0, 0, 0, 0.9)' }"
      closeable
      close-icon="close"
      close-icon-position="top-right"
      @close="closeVideoModal"
    >
      <div class="video-modal">
        <video
          ref="modalVideoRef"
          src="@/assets/videos/banner-video.mp4"
          class="modal-video"
          controls
          autoplay
          :muted="false"
          poster="@/assets/images/cabinetrepair/banner/b1.jpg"
          @loadstart="onVideoLoadStart"
          @loadeddata="onVideoLoaded"
          @error="onVideoError"
        >
          您的浏览器不支持视频播放
        </video>
        
        <!-- 视频加载状态 -->
        <div v-if="videoLoading" class="video-loading">
          <van-loading type="spinner" size="24px" color="#fff">
            视频加载中...
          </van-loading>
        </div>
        
        <!-- 视频加载失败 -->
        <div v-if="videoError" class="video-error">
          <van-icon name="warning-o" size="48px" color="#fff" />
          <p>视频加载失败</p>
          <van-button type="primary" size="small" @click="retryVideo">
            重试
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  NavBar,
  Tabs,
  Tab,
  Tag,
  Icon,
  Cell,
  Button,
  Popup,
  Swipe,
  SwipeItem,
  Loading,
  Empty,
  showToast,
} from "vant";
import { getAllEvaluations } from "@/api";
import { getChildRegions } from "@/api";
import { getProvinceList } from "@/api";
import { getFastestArrivalTime } from "@/api";

const router = useRouter();

// 标签切换状态
const activeTab = ref(0);
// 弹窗显示状态
const showAssurance = ref(false);
const showRegionSelector = ref(false);
// 视频弹窗相关
const showVideoModal = ref(false);
const videoLoading = ref(false);
const videoError = ref(false);
const bannerVideoRef = ref(null);
const modalVideoRef = ref(null);
// 地区选择相关变量
const regionTab = ref(0);
const provinces = ref([]);
const cities = ref([]);
const selectedProvince = ref(null);
const selectedCity = ref(null);
const selectedAreaText = ref("请选择服务区域");
// 地区加载状态
const loadingProvinces = ref(false);
const loadingCities = ref(false);
const errorProvinces = ref(false);
const errorCities = ref(false);

// 评价相关变量
const loading = ref(false);
const loadingMore = ref(false);
const error = ref(false);
const evaluationList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const totalEvaluations = ref(0);
const hasMore = ref(false);

// 计算属性
const averageScore = computed(() => {
  if (evaluationList.value.length === 0) return 0;
  const total = evaluationList.value.reduce(
    (sum, item) => sum + (item.score || 0),
    0
  );
  return total / evaluationList.value.length;
});

const technicalCount = computed(() => Math.floor(totalEvaluations.value * 0.4));
const politeCount = computed(() => Math.floor(totalEvaluations.value * 0.35));
const fastCount = computed(() => Math.floor(totalEvaluations.value * 0.25));

// 返回上一页
const handleGoBack = () => {
  history.back();
};

// 标签点击事件
const handleTabClick = (tab) => {
  if (tab.name === 1 && evaluationList.value.length === 0) {
    // 切换到评价标签且没有数据时加载
    fetchEvaluations();
  }
};

// 格式化手机号显示
const formatPhone = (userId) => {
  if (!userId) return "匿名用户";
  const str = userId.toString();
  if (str.length <= 4) return `用户${str}`;
  return `用户${str.slice(0, 2)}**${str.slice(-2)}`;
};

// 格式化时间显示
const formatTime = (timeStr) => {
  if (!timeStr) return "";
  try {
    const date = new Date(timeStr);
    return date
      .toLocaleString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
      })
      .replace(/\//g, "-");
  } catch (e) {
    return timeStr;
  }
};

// 格式化数量显示
const formatCount = (count) => {
  if (count >= 10000) {
    return (count / 10000).toFixed(1) + "万";
  }
  return count;
};

// 获取评价数据
const fetchEvaluations = async (loadMore = false) => {
  if (loadMore) {
    loadingMore.value = true;
  } else {
    loading.value = true;
    error.value = false;
  }

  try {
    const params = {
      current: currentPage.value,
      pageSize: pageSize.value,
    };
    const response = await getAllEvaluations(params);
    const result = response.data;

    if (loadMore) {
      evaluationList.value = [...evaluationList.value, ...result.list];
    } else {
      evaluationList.value = result.list || [];
      totalEvaluations.value = result.total || 0;
    }

    currentPage.value = result.currentPage || 1;
    hasMore.value = evaluationList.value.length < totalEvaluations.value;
  } catch (err) {
    console.error("获取评价数据失败:", err);
    error.value = true;
    if (!loadMore) {
      evaluationList.value = [];
    }
    showToast("获取评价失败，请重试");
  } finally {
    loading.value = false;
    loadingMore.value = false;
  }
};

// 加载更多评价
const loadMoreEvaluations = () => {
  currentPage.value += 1;
  fetchEvaluations(true);
};

const fetchProvinces = async () => {
  loadingProvinces.value = true;
  errorProvinces.value = false;

  try {
    console.log("开始获取省份列表...");
    const res = await getProvinceList();
    console.log("省份API响应:", res);
    
    // 假设后端返回的数据结构是 {code: 200, data: [...]}
    const result = res.data || res;
    console.log("省份数据:", result);
    provinces.value = result || [];
    console.log("处理后的省份列表:", provinces.value);
    console.log("省份数量:", provinces.value.length);
    
    if (provinces.value.length === 0) {
      console.warn("省份列表为空");
      showToast("暂无省份数据");
    }
  } catch (err) {
    console.error("获取省份列表失败:", err);
    errorProvinces.value = true;
    showToast("获取省份失败，请重试");
  } finally {
    loadingProvinces.value = false;
  }
};

const fetchCities = async (parentid) => {
  loadingCities.value = true;
  errorCities.value = false;

  try {
    console.log("开始获取城市列表，父ID:", parentid);
    const res = await getChildRegions(parentid);
    console.log("城市API响应:", res);
    
    // 假设后端返回的数据结构是 {code: 200, data: [...]}
    const result = res.data || res;
    console.log("城市数据:", result);
    cities.value = result || [];
    console.log("处理后的城市列表:", cities.value);
    console.log("城市数量:", cities.value.length);
    
    if (cities.value.length === 0) {
      console.warn("城市列表为空，父ID:", parentid);
      showToast("该省份下暂无城市数据");
    }
  } catch (err) {
    console.error("获取城市列表失败:", err);
    errorCities.value = true;
    showToast("获取城市失败，请重试");
  } finally {
    loadingCities.value = false;
  }
};

const handleRegionTabClick = (tab) => {
  // 如果切换到城市标签且已选择省份，则加载城市数据
  if (tab.name === 1 && selectedProvince.value) {
    fetchCities(selectedProvince.value.regionid)
  }
}

const selectProvince = (province) => {
  selectedProvince.value = province
  // 切换到城市标签并立即加载城市数据
  regionTab.value = 1
  // 清空之前选择的城市
  selectedCity.value = null
  // 立即加载城市数据
  fetchCities(province.regionid)
}

// 重试加载地区数据
const retryLoadRegions = () => {
  if (regionTab.value === 0) {
    fetchProvinces()
  } else if (regionTab.value === 1 && selectedProvince.value) {
    fetchCities(selectedProvince.value.regionid)
  }
}

const selectCity = async (city) => {
  selectedCity.value = city;

  // 更新显示文本
  if (city.fastestarrivaltime) {
    // 计算最快上门时间
    const now = new Date();
    const hoursLater = new Date(
      now.getTime() + city.fastestarrivaltime * 60 * 60 * 1000
    );

    // 格式化时间
    const hours = hoursLater.getHours().toString().padStart(2, "0");
    const minutes = hoursLater.getMinutes().toString().padStart(2, "0");

    selectedAreaText.value = `${selectedProvince.value.regionname}${city.regionname} | 最快今天${hours}:${minutes}上门服务`;
  } else {
    selectedAreaText.value = `${selectedProvince.value.regionname}${city.regionname} | 暂无法上门`;
  }

  // 关闭弹窗
  showRegionSelector.value = false;
};

// 组件挂载时加载省份数据和评价数据（如果需要）
onMounted(() => {
  fetchProvinces();

  if (activeTab.value === 1) {
    fetchEvaluations();
  }
});

const goToConfirmOrder = () => {
  console.log('点击窗帘安装填写需求按钮');
  console.log('当前选择的省份:', selectedProvince.value);
  console.log('当前选择的城市:', selectedCity.value);
  console.log('当前地址文本:', selectedAreaText.value);
  
  // 如果没有选择区域，提示用户选择，但仍然允许跳转
  if (!selectedProvince.value || !selectedCity.value) {
    showToast('建议先选择服务区域以获得更准确的服务');
    console.log('未选择服务区域，但允许跳转到窗帘订单页面');
    
    // 没有选择区域时，直接跳转到窗帘订单页面
    const routeParams = {
      path: '/curtain-order-confirm',
      query: {
        address: '请选择服务地址',
        provinceId: '',
        cityId: '',
        provinceName: '',
        cityName: ''
      }
    };
    
    console.log('无区域跳转窗帘订单，路由参数:', routeParams);
    
    router.push(routeParams).then(() => {
      console.log('无区域窗帘订单路由跳转成功');
    }).catch((error) => {
      console.error('无区域窗帘订单路由跳转失败:', error);
      showToast('页面跳转失败，请重试');
    });
    return;
  }
  
  // 有选择区域时的正常跳转到窗帘订单页面
  const routeParams = {
    path: '/curtain-order-confirm',
    query: {
      address: selectedAreaText.value,
      provinceId: selectedProvince.value.regionid,
      cityId: selectedCity.value.regionid,
      provinceName: selectedProvince.value.regionname,
      cityName: selectedCity.value.regionname
    }
  };
  
  console.log('准备跳转窗帘订单，路由参数:', routeParams);
  
  router.push(routeParams).then(() => {
    console.log('窗帘订单路由跳转成功');
  }).catch((error) => {
    console.error('窗帘订单路由跳转失败:', error);
    showToast('页面跳转失败，请重试');
  });
};

// 视频相关功能
const openVideoModal = () => {
  console.log('打开视频弹窗');
  showVideoModal.value = true;
  videoError.value = false;
  
  // 暂停轮播图中的视频
  if (bannerVideoRef.value) {
    bannerVideoRef.value.pause();
  }
};

const closeVideoModal = () => {
  console.log('关闭视频弹窗');
  showVideoModal.value = false;
  videoLoading.value = false;
  videoError.value = false;
  
  // 暂停弹窗中的视频
  if (modalVideoRef.value) {
    modalVideoRef.value.pause();
    modalVideoRef.value.currentTime = 0; // 重置到开始
  }
  
  // 恢复轮播图中的视频播放
  if (bannerVideoRef.value) {
    bannerVideoRef.value.play().catch(e => {
      console.log('轮播图视频自动播放失败:', e);
    });
  }
};

const onVideoLoadStart = () => {
  console.log('视频开始加载');
  videoLoading.value = true;
  videoError.value = false;
};

const onVideoLoaded = () => {
  console.log('视频加载完成');
  videoLoading.value = false;
  videoError.value = false;
};

const onVideoError = (event) => {
  console.error('视频加载失败:', event);
  videoLoading.value = false;
  videoError.value = true;
  showToast('视频加载失败');
};

const retryVideo = () => {
  console.log('重试加载视频');
  videoError.value = false;
  videoLoading.value = true;
  
  if (modalVideoRef.value) {
    modalVideoRef.value.load(); // 重新加载视频
  }
};

</script>

<style scoped>
/* 保持原有的样式不变 */
.loading-container,
.error-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.review-content {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.load-more {
  text-align: center;
}

.cabinet-repair-page {
  background-color: #fff;
  min-height: 100vh;
  padding-top: 46px;
  padding-bottom: 80px;
  box-sizing: border-box;
}

.banner-area {
  width: 100%;
  overflow: hidden;
}
.banner-swipe {
  height: 200px;
}
.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 视频容器 */
.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.banner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
}

/* 视频覆盖层 */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-container:hover .video-overlay {
  opacity: 1;
}

.play-icon {
  font-size: 48px;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.play-text {
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 视频弹窗样式 */
.video-modal {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-video {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.video-loading,
.video-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
}

.video-error p {
  margin: 16px 0;
  font-size: 16px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .play-icon {
    font-size: 36px;
  }
  
  .play-text {
    font-size: 12px;
  }
  
  .modal-video {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
  }
}

.service-info {
  padding: 12px 16px;
}
.promotion .title {
  font-size: 18px;
  color: #ff4545;
  margin-bottom: 8px;
}
.coupons {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.stats {
  font-size: 14px;
  color: #ff4545;
}

.tabs {
  background-color: #fff;
  z-index: 99;
}

.tab-content {
  padding: 16px;
}
section {
  margin-bottom: 24px;
}
section h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}
section p {
  font-size: 16px;
  color: #666;
  margin-bottom: 12px;
}
.section-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.fault-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.review-stats {
  display: flex;
  justify-content: space-around;
  background-color: #0066ff;
  color: #fff;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.review-item {
  margin-bottom: 8px;
}
.user-info {
  display: flex;
  flex-direction: column;
}
.review-time {
  font-size: 14px;
  color: #999;
}
.stars {
  display: flex;
}

.fixed-btn-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 16px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  z-index: 99;
}
.fixed-btn-area .van-button {
  width: 100%;
  margin-bottom: 8px;
}
.fixed-btn-area p {
  font-size: 14px;
  color: #999;
}

.assurance-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.popup-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
  position: relative;
}
.popup-header h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}
.popup-header p {
  font-size: 14px;
  color: #666;
}
.close-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 24px;
}
.assurance-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.assurance-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}
.assurance-item h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}
.assurance-item p {
  font-size: 14px;
  color: #666;
}

/* 地区选择器样式 */
.region-selector {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.region-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
  position: relative;
  text-align: center;
}

.region-header h2 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.region-tabs {
  flex: 1;
  overflow-y: auto;
}

.region-list {
  padding: 8px 0;
}

@media (max-width: 375px) {
  .banner-swipe {
    height: 150px;
  }
}
</style>